import { Radio, Empty, SwipeAction, Toast } from 'antd-mobile';
import React, { Component } from 'react';

import Header from '../../components/Header/header';
import { reqcardel, reqcarlist, reqcaredit } from '../../request/api';

import Tablist from '../../components/Tablist/Tablist';
import { imgPre } from '../../request/http';
import { filterPrice } from '../../filters/index';
import './shop.less'

let isRequest = true;
export default class shop extends Component {
  constructor() {
    super();
    this.state = {
      shops: [],
      // id: '',
      total: 0,//价格
      isAllcheck: false,
    }
    this.usr = {
      uid: ''
    }
    this.arr = ['全部', '降价', '常卖', '分类']
  }
  componentDidMount() {
    this.getCartList()
  }
  getCartList() {
    let uid = sessionStorage.getItem('isLogin') ? JSON.parse(sessionStorage.getItem('isLogin')).uid : "";
    if (uid == "") {
      Toast.show({
        content: '请先登录'
      })
      return
    }
    reqcarlist({ uid }).then(res => {
      if (res.data.code == 200) {
        // 合并数据
        let arr1 = res.data.list[0].content ? res.data.list[0].content : [];
        let arr2 = res.data.list[1].content ? res.data.list[1].content : [];
        let arr = [...arr1, ...arr2];
        // 旧数据
        let oldShopArr = this.state.shops;
        // 新数据
        let newShopArr = arr;
        // console.log(oldShopArr,newShopArr);
        newShopArr.forEach(item => {
          let obj = oldShopArr.find(i => i.id == item.id);//每一项对应的数据
          item.ischeck = obj ? obj.ischeck : false
        })
        //检查是否全部选中
        let flag = newShopArr.length > 0 ? newShopArr.every(item => item.ischeck) : false;
        // 修改state里的数据
        this.setState({
          shops: arr,
          // 获取全选状态
          isAllcheck: flag
        })
        isRequest = true;
      }
    })
  }
  check(e, index) {//单个选中
    let { shops } = this.state;
    shops[index].ischeck = e;
    this.setState({
      shops
    })
    let flag = shops.every(item => {
      return item.ischeck == true;
    })
    this.setState({
      isAllcheck: flag
    })
  }
  Delete(id) {
    reqcardel({ id }).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: '删除成功'
        })
      } else {
        Toast.show({
          content: '删除失败'
        })
      }
    })
    this.getCartList();
  }
  add(id) {//增加
    reqcaredit({ id, type: 2 }).then(res => {
      if (res.data.code == 200) {
        this.getCartList()
      }
    })
  }
  subtract(id, num) {//减少
    if (num <= 1) {
      Toast.show({
        content: "宝贝数量不能再少了"
      })
      return;
    }
    if (isRequest) {
      // console.log('isrequest')
      isRequest = false;
      reqcaredit({ id, type: 1 }).then(res => {
        if (res.data.code == 200) {
          this.getCartList()
        }
      })
    }
  }
  All(e) {
    let {shops} = this.state;
    shops.forEach(item => {
      item.ischeck = e;
    })
    this.setState({
      isAllcheck:e,
      shops
    })
  }
  render() {
    let { shops, total, isAllcheck } = this.state
    //总价
    let sum = 0;
    shops.forEach(item => {
      if (item.ischeck) {
        sum += item.num * item.price;
        // total += item.num * item.price;
      }
    })
    return (
      <div className='shop'>
        <Header title="购物车" back></Header>
        <Tablist arr={this.arr}></Tablist>

        <div className='list'>
          {shops.length > 0 ?
            <>
              {shops.map((item, index) => {
                return <SwipeAction
                  rightActions={[
                    {
                      key: 'delete',
                      text: '删除',
                      color: 'danger',
                    },
                  ]}
                  key={item.id}
                  onAction={(index) => this.Delete(item.id)}
                >
                  <div className='check' >
                    <Radio checked={item.ischeck} onChange={(e) => this.check(e, index)}></Radio>
                    <div className='item' >

                      <div className='left'>
                        <img src={imgPre + item.img} alt="" />
                      </div>
                      <div className='right'>
                        <h3>{item.goodsname}</h3>
                        <div>
                          <span>{'￥' + filterPrice(item.price ? item.price : 0)}</span>
                          <button onClick={() => this.subtract(item.id, item.num)}>-</button>
                          <i>{item.num}</i>
                          <button onClick={() => this.add(item.id)}>+</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </SwipeAction>
              })}
            </> : <Empty description='暂无数据' />
          }
        </div>
        <div className='all'>
          <Radio checked={isAllcheck} onChange={(e) => this.All(e)}>全选</Radio>
          <span>合计：{filterPrice(sum)}</span>
          {/* <Button>去结算</Button> */}
          <button>结算</button>
        </div>
      </div>
    )
  }
}
